<template>
  <el-dialog
    :modelValue="visible"
    @update:modelValue="updateVisible"
    title="编辑"
    width="100%"
    :max-width="1200"
    @close="handleClose"
  >
    <div class="form-inline-container flex justify-center items-center">
      <el-form
        ref="editFormRef"
        :model="localEditData"
        :rules="formRules"
        label-position="top"
      >
        <div class="inline-form-row">
          <div class="inline-item">
            <div class="label">语言标签</div>
            <el-input
              v-model="localEditData.language_tag"
              size="small"
              placeholder="如：zh-CN"
              class="truncated-input"
            />
          </div>
          <div class="inline-item">
            <div class="label">国际化标识</div>
            <el-input
              v-model="localEditData.code"
              size="small"
              placeholder="user.name.title"
              class="truncated-input"
            />
          </div>

          <div class="inline-item">
            <div class="label">文本值</div>
            <el-input
              v-model="localEditData.message"
              size="small"
              placeholder="请输入文本"
              :maxlength="50"
              show-word-limit
              class="truncated-input"
            />
          </div>
          <div class="inline-item">
            <div class="label">备注</div>
            <el-input
              v-model="localEditData.remarks"
              size="small"
              placeholder="可选"
              :maxlength="30"
              class="truncated-input"
            />
          </div>
        </div>
      </el-form>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button size="small" @click="handleCancel">取消</el-button>
        <el-button size="small" type="primary" @click="handleSubmit">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  editData: {
    type: Object,
    default: () => ({
      id: '',
      language_tag: '',
      code: '',
      message: '',
      remarks: ''
    })
  }
})

const emit = defineEmits(['update:visible', 'submit', 'close'])

const editFormRef = ref()
const localEditData = ref({ ...props.editData })

const formRules = ref({
  message: [
    { required: true, message: '请输入文本值', trigger: 'blur' }
  ]
})

watch(() => props.editData, (newVal) => {
  localEditData.value = { ...newVal }
}, { deep: true })

const updateVisible = (val) => {
  emit('update:visible', val)
}

const handleClose = () => {
  emit('close')
  nextTick(() => {
  })
}

const handleCancel = () => {
  emit('update:visible', false)
}

const handleSubmit = async () => {
  try {
    if (!localEditData.value.message?.trim()) {
      ElMessage.error('文本值不能为空')
      return
    }
    emit('submit', { ...localEditData.value })
  } catch (error) {
    ElMessage.error('提交失败')
  }
}
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.form-inline-container {
  width: 100%;
  white-space: nowrap; 
  overflow-x: auto;    
  overflow-y: hidden;
  padding: 10px 0;
  font-size: 14px;
}

.inline-form-row {
  display: flex;
  gap: 15px;
  min-width: 1000px; 
}

.inline-item {
  display: inline-block;
  width: 220px; 
}

.label {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
  white-space: nowrap;
}

.truncated-input :deep(.el-input__inner) {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding: 0 10px;
  font-size: 12px;
}

.truncated-input:nth-child(3) :deep(.el-input__inner),
.truncated-input:nth-child(4) :deep(.el-input__inner) {
  width: 200px !important;
}
</style>